<!--授位学员名册-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item right20">
        <div class="item-name">学期：</div>
        <el-select v-model="dataForm.byxueqi" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in nj" :key="item.id" :label="item.xqmc" :value="item.xqmc"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right20">
        <div class="item-name">培养层次：</div>
        <el-select v-model="dataForm.trainingLevelId" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in pycc" :key="item.dictValue" :label="item.dictValue" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-button color-primary width70" @click="initList">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" show-summary :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" >
        <el-table-column prop="grade" label="年级" align="center"></el-table-column>
        <el-table-column prop="specialtyName" label="专业" align="center"></el-table-column>
        <el-table-column prop="className" label="专业班次名称" align="center"></el-table-column>
        <el-table-column label="应授位人数" align="center">
            <el-table-column prop="total" label="人数" align="center" >
                <span class="editName" slot-scope="scope">
                    {{scope.row.total}}<img @click="jumpDetail(scope.row.classId)" :src="imgUrl">
                </span>
            </el-table-column>
            <el-table-column prop="satisfyConditions" label="满足授位条件" align="center" >
                <span class="editName" slot-scope="scope">
                    {{scope.row.satisfyConditions}}<img @click="jumpDetail(scope.row.classId)" :src="imgUrl">
                </span>
            </el-table-column>
            <el-table-column prop="discontentConditions" label="不满足授位条件" align="center" >
                <span class="editName" slot-scope="scope">
                    {{scope.row.discontentConditions}}<img @click="jumpDetail(scope.row.classId)" :src="imgUrl">
                </span>
            </el-table-column>
        </el-table-column>
        <el-table-column label="处理情况" align="center" >
            <el-table-column prop="alreadyBachelor" label="已授位" align="center">
                <span class="editName" slot-scope="scope">
                    {{scope.row.alreadyBachelor}}<img @click="jumpDetail(scope.row.classId)" :src="imgUrl">
                </span>
            </el-table-column>
            <el-table-column prop="untreated" label="未处理" align="center">
                <span class="editName" slot-scope="scope">
                    {{scope.row.untreated}}<img @click="jumpDetail(scope.row.classId)" :src="imgUrl">
                </span>
            </el-table-column>
        </el-table-column>
        <el-table-column prop="specialTreatment" label="特殊处理人数" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="pagination-block">
      <el-pagination prev-text="上一页" next-text="下一页" :page-size="50" v-if="total>50" @current-change="currentPage"
        layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getSWList,getFirstLevel} from "@/api/student";
export default {
  data() {
    return {
      total:1,
      imgUrl:require('../../../assets/assessment/icon-plan-record-detail.png'),
      dataForm:{
        byxueqi:'',
        trainingLevelId:'',
        pageNo:1
      },
      nj:[],
      pycc:[],
      tableData: [],
    };
  },
  mounted(){
    this.initList();
    this.initClass();
    //学期列表
    this.commonApi.getXQOption().then(res=>{
      this.nj = res.data
    })
  },
  methods: {
    currentPage(e){
      this.dataForm.pageNo = e;
      this.initList()
    },
    async initList(){
      let res = await getSWList(this.dataForm);
      if(res.code == 200){
        this.tableData = res.data;
        this.total = res.data.total;
      }
    },
    //获取培养层次
    async initClass(){
      let res = await getFirstLevel({code:'pylevel'});
      if(res.code == 200){
        this.pycc = res.data
      }
    },
    //编辑
    jumpDetail(id){
      this.$router.push({
          path:'/student/graduationStudent/awardDetail',
          query:{
            id:id,
          }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table__header th{border-color: #c7d7eb}
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

 /deep/ .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.width70{width: 70px;}
.search-container {
  justify-content: flex-start !important;
}
.right20{margin-right: 30px;}
</style>
